@()
@main("Search By Gene Id-CBGD") {
	<div class="row">
		<div class="form-group col-sm-12">
			<h2 class="page-heading"
			style="text-align: left;
				border-bottom: 5px solid #e9f3f4">Search By Gene Id</h2>
		</div>
	</div>

	<form class="registration-form form-horizontal" id="form"
	accept-charset="UTF-8" method="post">

		<div class="form-group">
			<label class="control-label col-sm-2">Gene ID:</label>
			<div class="col-sm-8">
				<textarea name="geneId" id="geneId" class="form-control" rows="5"></textarea>
				<span class="help-block">e.g.,&nbsp;<a href="#"><em id="egGeneId">
					HG_GLEAN_10000035,HG_GLEAN_10000037,HG_GLEAN_10000041</em></a></span>
			</div>
		</div>

		<div class="form-group">
			<div class="actions col-sm-offset-2 col-sm-2">
				<button type="button" class="btn btn-primary" style="width: 90%;" id="search" onclick="mySearch()">
					Search</button>
			</div>
		</div>
	</form>

	<div id="result" style="display: none">
		<hr>

		<label>Select the columns to display:</label>
		<div id="checkbox" class="checkbox">

		</div>
		<div id="toolbar">
				&nbsp;Keyword：
		</div>

		<table class="display table table-bordered" id="table" data-pagination="true" data-search="true"
		data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100, all]" data-search-align="left" data-multiple-search="true"
		style="table-layout: fixed;
			word-wrap: break-word;"
		>
			<thead>
				<tr>
				</tr>
			</thead>
		</table>
	</div>


	<script>
			$(function () {

				SearchByGeneId.init

				function extractor(query) {
					var result = /([^,]+)$/.exec(query);
					if (result && result[1])
						return result[1].trim();
					return '';
				}

				$.ajax({
					url: "@routes.GenomeSearchController.getAllGeneIds()",
					async: false,
					type: "get",
					success: function (data) {
						$('#geneId').typeahead({
							source: data,
							updater: function (item) {
								return this.$element.val().replace(/[^,]*$/, '') + item + ',';
							},
							matcher: function (item) {
								var tquery = extractor(this.query);
								if (!tquery) return false;
								return ~item.toLowerCase().indexOf(tquery.toLowerCase())
							},
							highlighter: function (item) {
								var query = extractor(this.query).replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
								return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
									return '<strong>' + match + '</strong>'
								})
							}
						})
					}
				})

				$('#egGeneId').click(function () {
					var eg = $("#egGeneId").text().trim();
					$('#geneId').val(eg);
					$("#form").formValidation("revalidateField","geneId")
				});

				formValidation()
			})

			function formValidation() {
				$('#form').formValidation({
					framework: 'bootstrap',
					icon: {
						valid: 'glyphicon glyphicon-ok',
						invalid: 'glyphicon glyphicon-remove',
						validating: 'glyphicon glyphicon-refresh'
					},
					fields: {
						geneId: {
							validators: {
								notEmpty: {
									message: 'Gene Id is required！'
								},
							}
						},
					}
				});
			}

			function mySearch() {
				var form = $("#form")
				var fv = form.data("formValidation")
				fv.validate()
				if (fv.isValid()) {
					$("#search").attr("disabled", true).html("Search...")
					$.ajax({
						url: "@routes.GenomeSearchController.searchByGeneId()",
						type: "post",
						data: $("#form").serialize(),
						success: function (data) {
							$('#table').bootstrapTable("load", data);
							$("#search").attr("disabled", false).html("Search").blur()
							$("#result").show()
						}
					});
				}
			}

			function setColumns(value) {
				var element = $("input:checkbox[value=" + value + "]")
				if (element.is(":checked")) {
					$('#table').bootstrapTable('showColumn', value);
				} else {
					$('#table').bootstrapTable('hideColumn', value);
				}
			}
	</script>


}